body {
  margin: 0;
}
.replayer-wrapper {
  position: relative;
}
.replayer-mouse {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: 0.05s linear;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('');
}
.replayer-mouse::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: rgb(73, 80, 246);
  transform: translate(-10px, -10px);
  opacity: 0.3;
}
.replayer-mouse.active::after {
  animation: click 0.2s ease-in-out 1;
}

@keyframes click {
  0% {
    opacity: 0.3;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    transform: translate(-10px, -10px);
  }
  50% {
    opacity: 0.5;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    transform: translate(-5px, -5px);
  }
}
